<template>
  <div>
    <div class="lineProduct">
      <div class="productTitle">商品信息</div>
      <yd-flexbox style="padding-left:5px;padding-right:5px;padding-bottom:5px">
        <div class="productImage">
          <img :src="orderInfoData.image_top || orderInfoData.logo" alt="">
        </div>
        <yd-flexbox-item class="productContent">
          <div class="title">{{orderInfoData.product_name || orderInfoData.title}}</div>
          <div class="content">{{orderInfoData.product_sub_name}}</div>
          <div class="content" v-show="flag == '0'">成人价:<span style="color:coral">¥{{orderInfoData.adult_sale_price / 100}}</span>, 儿童价:<span style="color:coral">¥{{orderInfoData.children_sale_price / 100}}</span></div>
          <div class="content" v-show="flag == '1' || flag == '2'">价格:<span style="color:coral">¥{{orderInfoData.cost_price / 100}}</span></div>
        </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="lineOrder">
      <div class="productTitle">订单信息</div>
      <div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">商品名称: {{orderInfoData.order_name || orderInfoData.ttsname}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">订单编号: {{orderInfoData.order_code || orderInfoData.ttocode || orderCode}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">销售价格: <span style="color:coral">¥{{orderInfoData.money || orderInfoData.pay_fee / 100}}</span></span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">手机号码: {{orderInfoData.mobile}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">下单时间: {{orderInfoData.create_time || orderInfoData.ttocreate_time || orderInfoData.new_create_time}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left" v-if="flag == '1' || flag == '2'">购买数量: {{orderInfoData.num}}</span>
                <span slot="left" v-if="flag == '0'">购买数量: 成人数{{orderInfoData.adult_number}}&nbsp;儿童数{{orderInfoData.children_number}}</span>
            </yd-cell-item>
        </yd-cell-group>
      </div>
    </div>
    <div class="lineTourist">
      <div class="productTitle">游客信息</div>
      <div class="tourist" v-for="touristList in touristArr" :key="touristList.index" v-show="flag == '0'">
          <yd-flexbox class="touristlist">
            <yd-flexbox-item align="center">姓名:{{touristList.lot_name}}</yd-flexbox-item>
            <yd-flexbox-item>性别:{{touristList.sex_name}}</yd-flexbox-item>
          </yd-flexbox>
          <yd-flexbox class="touristlist">
            <yd-flexbox-item>证件类型:{{touristList.card_type_name}}</yd-flexbox-item>
            <yd-flexbox-item>证件号码:{{touristList.lot_cardno}}</yd-flexbox-item>
          </yd-flexbox>
          <yd-flexbox class="touristlist">
            <yd-flexbox-item>电话号码:{{touristList.lot_mobile}}</yd-flexbox-item>
            <yd-flexbox-item>出发地点:{{touristList.assembling_place}}</yd-flexbox-item>
          </yd-flexbox>
      </div>
      <yd-cell-item v-show="flag == '1'">
        <span slot="left">联系人姓名: {{orderInfoData.ttoname}}</span>
      </yd-cell-item>
      <yd-cell-item v-show="flag == '2'" v-for="touristList in touristArr" :key="touristList.index">
        <span slot="left">入住人姓名: {{touristList.name}}</span>
      </yd-cell-item>
      <yd-cell-item v-show="flag == '2' || flag == '1'">
        <span slot="left">联系人电话: {{orderInfoData.mobile}}</span>
      </yd-cell-item>
    </div>
    <div style="margin-left:10px;margin-right:10px">
      <yd-button size="large" type="warning" @click.native="save()">完成</yd-button>
    </div>
    <!-- <div class="reminderInfo">
      <div class="productTitle">温馨提示</div>
    </div> -->
  </div>
</template>

<script>

export default {
  name: 'boutiqueline_order_info',
  data() {
    return {
      w: window.innerWidth,
      h: window.innerHeight,
      orderCode: this.$route.query.orderCode,
      orderInfoData: {},
      touristArr: [],
      flag: '0',
      ticketstr: ''
    }
  },
  mounted() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.isPhone();
    }
    console.log('传过来的订单号' + this.orderCode);
    console.log('屏幕宽高' + this.w + this.h);
    this.load();
    this.getOrderInfo();
  },
  methods: {
    load() {
      alert(this.orderCode);
    },
    // 订单详情
    getOrderInfo() {
      if (this.orderCode.indexOf('A') === 0) {
        this.flag = '1';
        // 景区订单详情
        this.hdAjax({
          url: this.API.ordersaleinfobycode,
          data: {
            code: this.orderCode
          },
          success: (resultData) => {
            console.log(resultData);
            console.log('……………………^-^');
            this.orderInfoData = resultData.data;
          }
        });
      } else if (this.orderCode.indexOf('H') === 0) {
        this.flag = '2';
        // 酒店订单详情(联系人)
        this.hdAjax({
          url: this.API.findHLDHotelOrderList,
          data: {
            code: this.orderCode
          },
          success: (resultData) => {
            console.log(resultData);
            this.touristArr = resultData.data;
          }
        });
        // 酒店订单详情(基本信息)
        this.hdAjax({
          url: this.API.HLDordersaleinfobycode,
          data: {
            code: this.orderCode
          },
          success: (resultData) => {
            console.log(resultData);
            this.orderInfoData = resultData.data;
          }
        });
      } else {
        // 线路订单详情
        this.hdAjax({
          url: this.API.lineFindOrderInfo,
          data: {
            code: this.orderCode
          },
          success: (resultData) => {
            console.log(resultData);
            this.orderInfoData = resultData.data;
            this.touristArr = resultData.data.touristList;
          }
        });
      }
    },
    save() {
      console.log('aaaa');
      if (this.orderCode.indexOf('A') === 0) {
        this.$router.push({'path': '/blueindex', query: {}});
      } else if (this.orderCode.indexOf('H') === 0) {
        this.$router.push({'path': '/liveindex', query: {}});
      } else if (this.orderCode.indexOf('L') === 0) {
        this.$router.push({'path': 'boutiquelineindex', query: {}});
      }
    }
  }
}
</script>

<style>
  body {
    font-family: "微软雅黑";
    background-color: #f0f0f0;
  }
  header {
    background-color: #393a3f;
  }
  .lineProduct{
    margin: 10px;
    border-radius: 5px;
    background-color: #fff;
    /* height: 130px; */
  }
  .productTitle{
    height: 40px;
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 10px 10px;
    font-size: 18px;
    color: coral;
  }
  .lineOrder{
    margin: 10px;
    background-color: #fff;
    border-radius: 5px;
  }
  .lineTourist{
    margin: 10px;
    border-radius: 5px;
    background-color: #fff;
  }
  .reminderInfo{
    margin: 10px;
    border-radius: 5px;
    background-color: #fff;
    height: 120px;
  }
  .productImage{
    width: 80px;
    height: 80px;
  }
  .productImage img{
    width: 80px;
    height: 80px;
  }
  .productContent{
    /* background-color: bisque; */
    height: 80px;
    padding-left: 5px;
  }
  .title{
    height:30px;
    line-height:30px;
  }
  .content{
    height:25px;
    line-height:25px;
  }
  .tourist{
    border-bottom: 1px solid #f5f5f5;
  }
  .touristlist{
    height:30px;
    padding:5px
  }
</style>